<script lang="ts" setup>
import { ListCourseWithPrice } from "@/types/course";
import { getOSSURL } from "@/utils/utils";
import { useRouter } from "vue-router";
import * as CourseApi from "@/api/train/course";
import * as BannerApi from "@/api/official-website/unit-banner";
import { isIOS, isMiniProgram } from "@/utils/mini-program";
import * as DiyApi from "@/api/official-website/unit-diy";
import information from "@/views/information/index.vue";

const router = useRouter();

const page = ref(0);

// 金刚区接口对接
const getDiamonds = () => {
  DiyApi.getDiy({ pageNo: 1, pageSize: 10 }).then((res) => {
    console.log(res.data.list);
    // 排序
    const data = res.data.list.sort((prev, next) => prev.sortNo - next.sortNo);
    diamonds.value = data;
  });
};
getDiamonds();
const diamonds = ref<DiyApi.DiyDetail[]>([]);

const courseList = ref<ListCourseWithPrice[]>([]);
CourseApi.getCoursePage({ pageNo: 1, pageSize: 4 })
  .then((res) => {
    courseList.value = res.data.list;
  })
  .catch((err) => {
    console.log(err);
  });

const bannerList = ref<BannerApi.BannerDetail[]>([]);
BannerApi.getBanner({ pageNo: 1, pageSize: 10 })
  .then((res) => {
    // 进行排序
    const data = res.data.list.sort((prev, next) => prev.sortNo - next.sortNo);
    bannerList.value = data;
  })
  .catch((err) => {
    console.log(err);
  });

const jumpClick = (switchJump: number, jumpPage: string) => {
  // 是否打开跳转开关
  if (switchJump === 0) return;
  // 跳转到对应页面
  router.push(jumpPage);
};

const cantBuy = isIOS() && isMiniProgram();
</script>

<template>
  <div>
    <!-- 轮播图 -->
    <nut-swiper class="h-48" :init-page="page" :is-prevent-default="false" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
      <nut-swiper-item v-for="item in bannerList" :key="item.id" class="h-48" @click="() => jumpClick(item.switchJump, item.jumpPage)">
        <img class="w-full h-full object-cover" :src="item.bannerUrl" alt="" />
      </nut-swiper-item>
    </nut-swiper>

    <!-- 金刚区 -->
    <div class="mx-3 my-4 p-5 grid grid-cols-4 gap-4 bg-white rd-2">
      <div v-for="(item, i) in diamonds" :key="i" class="flex flex-col items-center gap-1.5" @click="() => router.push(item.jumpPage)">
        <img class="w-6 h-6 object-contain" :src="item.iconUrl" alt="" />
        <p class="text-center text-sm">{{ item.diyName }}</p>
      </div>
    </div>

    <!-- 推广入口 -->
    <div class="mx-3 my-4" @click="router.push('/mall')">
      <nut-image class="h-auto of-hidden rd-2.5" :src="getOSSURL('/imgs/mall/others/promotion-banner.png?a=2')" fit="cover" />
    </div>

    <!-- 班型列表 -->
    <!-- <div class="mx-3 my-4 px-4 py-3 bg-white rd-2">
      <h2 class="text-xl">热门课程</h2>
      <ul class="mt-2 flex flex-col gap-3">
        <li v-for="course in courseList" :key="course.id" @click="router.push(`/course/${course.id}`)">
          课程item
          <nut-row :gutter="16">
            <nut-col span="11">
              <nut-image class="w-full h-24 rounded-lg overflow-hidden" :src="getOSSURL(course.courseCoverUrl)" fit="cover" />
            </nut-col>
            <nut-col span="13" class="h-24 flex flex-col">
              <div class="flex items-center gap-1">
                vip
                <span v-if="(course as ListCourseWithPrice).price" class="shrink-0 px-1 bg-blue-5 c-white font-b font-ys text-xs rd-1"
                  >{{ cantBuy ? "精品" : "VIP" }}
                </span>
                <span v-else class="shrink-0 px-1 bg-yellow-5 c-white font-b font-ys text-xs rd-1">免费</span>
                商品名称
                <h3 class="grow w-0 truncate">{{ course.courseName }}</h3>
              </div>
              标签
              <div v-if="course.tags.length" class="mt-1 flex gap-1 items-center flex-wrap">
                <span v-for="tag in course.tags" :key="tag" class="px-1 text-xs c-blue-5 b-1.5 b-solid b-blue-3 rd-1.5">{{ tag }}</span>
              </div>
              价格
              <div class="mt-2 flex justify-end">
                <div class="text-xs c-gray-7" v-if="!cantBuy">
                  ￥<span class="text-lg">{{ (course as ListCourseWithPrice).price / 100 }}</span>
                </div>
                <div v-else class="bg-blue p-1.5 text-xs text-white rounded-md">立即学习</div>
              </div>
            </nut-col>
          </nut-row>
        </li>
      </ul>
    </div> -->
    <!-- 隐藏信息流 -->
    <div class="my-4 bg-white">
      <h2 class="text-xl px-4 pt-5 pb-1">发现精彩</h2>
      <information />
    </div>

    <!-- 客服按钮 -->
    <div class="fixed bottom-30 right-3 z-1" @click="router.push('/contact')">
      <img class="w-16 h-16" :src="getOSSURL('imgs/school/icons/kefu_lv.png')" />
    </div>
  </div>
</template>
